services-view,
.services-view {
  display: flex;
  flex: 1 1 auto;
  .vendor-info-icon {
    font-size: 10px;
    padding-left: 2px;
    vertical-align: middle;
  }
}

.services-view {
  .blank-slate-pf {
    background-color: transparent;
    border: none;
  }
  .filter-panel-container ul {
    margin-bottom: 10px;
  }
  .flash-filter-tag{
    animation: flash linear 1s 1;
  }
  .pf-empty-state {
    margin: 0 (@grid-gutter-width / 2);
    width: 100%;
  }
  .services-item {
    color: @text-color;
    min-height: 140px;
    overflow: hidden;
    padding: 0 (@grid-gutter-width / 4) (@grid-gutter-width / 2);
    position: relative;
    text-align: center;
    width: 50%;
    word-break: break-word;
    z-index: 99; // place above the background

    @media(min-width: @screen-xs-min) {
      width: 33.3333%;
    }

    @media(min-width: @screen-sm-min) {
      width: 50%;
    }

    @media(min-width: @screen-md-min) {
      width: 25%;
    }

    @media(min-width: @screen-lg-min) {
      width: 20%;
    }

    @media(min-width: @screen-xl-min) {
      width: 16.6667%;
    }

    &:focus,
    &:hover {
      text-decoration: none;
      .services-item-icon:after {
        border: 2px solid @link-color;
      }

      .services-item-name {
        color: @link-color;
      }
    }

    .services-item-icon {
      &:after {
        border: 2px solid transparent;
        border-radius: @service-item-size;
        content: "";
        height: @service-item-size;
        left: 50%;
        margin: -(@service-item-size / 2) 0 0 -(@service-item-size / 2);
        position: absolute;
        top: 50%;
        transition: border 125ms linear;
        width: @service-item-size;
        will-change: border;
      }

      .font-icon,
      .fa,
      .pficon,
      img {
        position: relative;
        // position above background
        z-index: 1;
      }
      // so that SVGs are sized correctly in Safari and IE
      img[src$=".svg"] {
        width: 50px;
      }
    }

    .icon-ruby, .fa-question {
      right: 2px;
    }

    .icon-wildfly {
      right: -1px;
    }
  }

  .services-item-icon {
    align-items: center;
    display: flex;
    font-size: 48px;
    height: 92px;
    justify-content: center;
    position: relative;

    img {
      max-height: 50px;
      max-width: 50px;
    }
  }

  .services-item-name {
    flex: 1 1 0%;
    font-size: 14px;
    font-weight: 600;
    .line-clamp(3, 1.4em); // limit to 3 lines
    position: relative;
    word-wrap: break-word;
  }

  .services-items {
    align-content: flex-start;
    background-color: @color-pf-white;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    padding-bottom: 30px; // give equal space below last row of service-items
    width: 100%; // IE11 needs width associated with flex
    z-index: 9; // elevate so that toggling tiles that cause repositioning do not overlay main content block
    &.no-items-available {
      display: block;
      .pf-empty-state {
        margin: 0;
      }
    }
  }

  .services-items-filter {
    border-bottom: 1px solid @color-pf-black-200;
    flex: 1 1 100%;
    margin: (@grid-gutter-width / 4) (@grid-gutter-width / 2);
    padding: 0 0 10px;
    div.checkbox {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .services-no-sub-categories {
    background: @color-pf-white; // so background extends when full height when default to show all
  }

  @media(min-width: @screen-xs-min) {
    .services-no-sub-categories {
      display: flex;
      flex: 1 1 auto;
      margin: 0 (@grid-gutter-width / 2) 12px;
      .landing & {
        margin-top: 15px;
      }
      .services-items {
        left: 0;
        margin: 0 0 8px;
        right: 0;
      }
    }

    .services-sub-categories {
      align-content: flex-start;
      align-items: flex-start;
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      margin: 0 (@grid-gutter-width / 2) 12px;
      .landing & {
        margin-top: 15px;
      }
      padding: 0;
      position: relative;
      .services-items {
        left: 0;
        margin: 5px 0;
        position: absolute;
        right: 0;
      }
    }

    .services-sub-category {
      background-color: rgba(255,255,255,.9);
      border-radius: 2px 2px 0 0;
      display: inline-block;
      margin: 0 5px 5px 0;

      &.active .services-sub-category-tab {
        background-color: @color-pf-white;
        border-radius: 0;
        color: @link-color !important;
        &:after {
          background-color: @color-pf-white;
          bottom: -5px;
          content: "";
          height: 5px;
          left: 0;
          position: absolute;
          right: 0;
        }
      }

      &:hover {
        background-color: @color-pf-white;
      }

      .services-sub-category-tab {
        color: @text-color;
        display: flex;
        font-size: 14px;
        font-weight: 600;
        flex-direction: column;
        height: 110px;
        justify-content: center;
        line-height: 1.3;
        padding: 0 5px;
        position: relative;
        text-align: center;
        width: 120px;

        &:focus,
        &:hover {
          text-decoration: none;
        }

        &:hover {
          color: @link-color;
        }
      }

      .services-sub-category-tab-icon,
      .services-sub-category-tab-image {
        margin: 0 0 10px;
      }

      .services-sub-category-tab-icon {
        font-size: 36px;
      }

      .services-sub-category-tab-image {
        height: 36px;
        position: relative;
        img {
          bottom: 0;
          left: 0;
          margin: auto;
          max-height: 36px;
          max-width: 36px;
          position: absolute;
          right: 0;
          top: 0;
          // so that SVGs are sized correctly in IE
          &[src$=".svg"] {
            width: 36px;
          }
        }
      }
    }
  }

  .services-view-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    width: 100%; // IE11

    .landing & {
      background-color: fade(@color-pf-blue-700, 60%);
    }

    .add-methods {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .add-other {
      list-style: none;
      margin: 0 (@grid-gutter-width / 2) 0 0;
      padding: 0;

      .dropdown-menu {
        &:after {
          border: 6px solid transparent;
          border-bottom-color: #fff;
          border-top-width: 0;
          content: "";
          display: block;
          height: 0;
          position: absolute;
          right: 7px;
          top: -6px;
          vertical-align: middle;
          width: 0;
        }
        &.pull-right {
          margin-top: 5px;
          right: -8px;
        }
      }

      > li {
        display: inline-block;
        margin-left: 20px;

        > a {
          color: @color-pf-white;
          text-decoration: none;

          &:hover {
            color: @color-pf-blue-300;
          }
        }
      }
    }

    h1 {
      margin-left: (@grid-gutter-width / 2);
      margin-right: (@grid-gutter-width / 2);

      @media(max-width: @screen-xxs-max) {
        font-size: 18px;
        margin-bottom: 15px;
      }

      .landing & {
        color: @color-pf-white;
        margin: 0;
        padding: (@grid-gutter-width / 4) 0 (@grid-gutter-width / 4) (@grid-gutter-width / 2);
        text-shadow: 1px 1px 2px rgba(0,0,0,.5);
      }
    }

    .services-inner-container {
      position: relative;
      @media(min-width: 480px) {
        .landing & {
          background: fade(@color-pf-blue-700, 90%);
          position: static;
        }
      }
    }

    @media(min-width: @screen-sm-min) {
      .services-inner-container {
        display: flex;
        flex: 1 1 auto;
      }
    }

    .services-categories {
      margin-bottom: 0;

      @media(min-width: @screen-xs-min) {
        margin-bottom: (@grid-gutter-width / 2);
        margin-left: (@grid-gutter-width / 2);
        margin-right: (@grid-gutter-width / 2);
      }

      .landing & {
        border: none;
        color: @color-pf-white;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: (@grid-gutter-width / 2);

        @media(min-width: @screen-xs-min) {
          background-color: fade(@color-pf-blue-700, 90%);
        }
      }

      li > a {
        @media(max-width: @screen-xxs-max) {
          color: @link-color;

          &:hover {
            color: @link-hover-color;
          }
        }

        .landing & {
          color: @color-pf-white;

          &:hover {
            color: @color-pf-blue-300;

            &:before {
              display: none;
            }
          }
        }
        &.services-back-link {
          // hidden by default
          display: none;
        }
      }

      .landing & li.active > a {
        color: @color-pf-blue-300;

        &:before {
          background: @color-pf-blue-300;
          bottom: 0;
          display: block;
        }
      }
    }

    .services-no-sub-categories,
    .services-sub-categories {
      // position so services-sub-categories and services-no-sub-categories are aligned, so they overlay during transition
      &.ng-enter, &.ng-enter-prepare {
        bottom: 0;
        display: block !important;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        .landing & {
          top: 80px;
        }
      }
    }

    .services-sub-categories {
      list-style: none;

      > li > a.services-back-link {
        display: none;
      }
    }

    @media(max-width: @screen-xxs-max) {
      &.mobile-categories-view {
        .services-categories .active .services-back-link {
          display: none !important;
        }

        .services-items,
        .services-sub-categories {
          display: none;
        }
      }

      &.mobile-items-view {
        .services-categories {
          display: none;
        }

        .services-sub-category {
          > a:after,
          &:not(.active) {
            display: none;
          }
        }
      }

      &.mobile-items-view,
      &.mobile-subcategories-view {
        .add-methods {
          display: none;
        }
      }

      &.mobile-items-view .services-sub-categories,
      &.mobile-subcategories-view .services-categories {
        > li.active {
          background-color: transparent;
          margin-bottom: 0;

          &:after {
            display: none;
          }

          > a {
            &.services-category-heading,
            &.services-sub-category-tab {
              background: transparent;
              color: @text-color;
              margin-left: 0;
              margin-right: 0;
              position: absolute;
              text-align: center;
              width: 100%;

              .landing & {
                color: @color-pf-white;
              }

              &:focus,
              &:hover {
                cursor: default;

                .landing & {
                  color: @color-pf-white;
                }
              }
            }
          }

          > a.services-back-link {
            background: transparent;
            display: inline-block;
            font-size: 10px;
            margin-left: 10px;
            padding-left: 15px;
            width: auto;

            .landing & {
              margin-left: 15px;
            }

            &:after {
              content: '\f104';
              display: block;
              font-family: 'FontAwesome';
              position: absolute;
              left: 5px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }

      &.mobile-subcategories-view {
        .services-categories > li:not(.active),
        .services-categories > li > a:after,
        .services-sub-categories .services-items,
        .services-sub-category.active > .services-back-link {
          display: none;
        }

        .services-categories > li {
          margin-bottom: 0;
        }
      }

      .services-categories,
      .services-sub-categories {
        border-bottom: 0;
        font-size: @font-size-base;
        padding: 0 !important;

        > li {
          float: none;
          margin-bottom: 5px;
          padding-right: 0; // fixes bug in console where arrows are misaligned
          position: relative;

          &.active {
            > a {
              cursor: pointer;

              &:before {
                display: none !important;
              }

              .landing & {
                color: @color-pf-white;
              }
            }

            .services-back-link {
              cursor: pointer;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }

          .landing & {
            background-color: fade(@color-pf-blue-700, 90%);
            margin-bottom: 1px;
          }

          > a {
            background-color: @color-pf-white;
            display: block;
            line-height: 1;
            margin-left: (@grid-gutter-width / 4);
            margin-right: (@grid-gutter-width / 4);
            padding: (@grid-gutter-width / 4);
            position: relative;

            .landing & {
              background-color: transparent;
              color: @color-pf-white;
              margin-left: 0;
              margin-right: 0;
              padding-left: (@grid-gutter-width / 2);
              padding-right: (@grid-gutter-width / 2);
            }

            &::after {
              content: '\f061';
              color: @link-color;
              display: block;
              font-family: 'FontAwesome';
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);

              .landing & {
                color: @color-pf-white;
                right: 20px;
              }
            }

            &:before {
              display: none;
            }

            &:focus,
            &:hover {
              text-decoration: none;

              .landing & {
                color: @link-color;
              }
            }

            .services-sub-category-tab-icon,
            .services-sub-category-tab-image {
              display: none !important;
            }
          }
        }
      }

      .services-categories > li > a {
        border-radius: 0;

        &:hover {
          background-color: @color-pf-white;

          .landing & {
            background-color: transparent;
          }
        }
      }

      .services-items {
        margin: 0 10px 10px;
        width: auto;

        .landing & {
          margin: 0;
        }
      }

      .services-sub-categories {
        margin-bottom: 0;
      }
    }
  }

  .spinner-container {
    display: flex;
    flex: 1 1 auto;
    padding-top: 100px;
    padding-bottom: 100px;

    .landing & {
      background: @color-pf-white;
    }
  }
}
